<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
  <!--
    如果需要多个点击按钮，并且按下去不影响其他的按钮，并且每个按钮功能相同
    那么需要用到组件化编程，否则每个按钮相同的功能都要独立在创建一个方法
  -->
  <h1>组件化编程-全局组件</h1>
  <!--使用全局组件-->
  <counter></counter>
  <counter></counter>

</div>
<script src="vue.js"></script>
<script>
  Vue.component("counter",
          {
            template:`<button v-on:click="click()">点击次数={{count}}次 【全局组件化】</button>`,
            // 数据池中的数据使用函数/方法返回，目的是为了保证每个组件的数据是独立的
            data(){
              return {
                count:10
              }
            },
            methods:{
              click(){
                this.count++
              }
            }
          }
  )
  //创建Vue实例，必须有
  let vm=new Vue({
    el:"#app"
  })
</script>
</body>
</html>